<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端事件</title>
    <meta name='viewport' content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
</head>
<style>
body{
    text-align: center;
}
div{
    width: 80vw;
    height: 50vh;
    line-height: 50vh;
    background: red;
     margin: auto;
}
</style>
<body>
    <div id="box">
        手指区域
    </div>
</body>
<script>
document.addEventListener('touchstart',function(ev){
    ev.preventDefault();
});
var box=document.getElementById("box");
box.addEventListener('touchstart',function(){
    this.innerHTML='手指按下了';
});
box.addEventListener('touchmove',function(){
    this.innerHTML='手指移动了';
});
box.addEventListener('touchend',function(){
    this.innerHTML='手指离开了';
});
</script>
</html>